<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }


        li {
            list-style: none;
        }

        /* 顶部 */

        .header {
            height: 50px;
            background-image: url(image/便签管理.png);
            background-size: 50px 50px;
            background-repeat: no-repeat;
            background-position: 640px 0px;
            border: 1px red solid;
        }



        .header h1 {
            text-align: center;
            font-size: 40px;
            line-height: 50px;
        }

        /* 主体 */
        .bodyer {
            /* height: 500px; */
            display: flex;
            justify-content: center;
            /* align-items: center; */
            border: 1px solid blue;
        }

        .b-left {
            width: 600px;
            height: 800px;
            border: 1px solid green;
            margin-right: 100px;
        }

        .weiwancheng_ul {
            text-align: center;
            height: 30px;
            background-color: aqua;
        }


        .b-right {
            width: 600px;
            height: 800px;

            border: 1px solid yellow;
        }

        .yichaoshi_ul {
            text-align: center;
            height: 30px;

            background-color: rgb(0, 255, 38);
        }
    </style>
</head>

<body>
    <!-- 顶部 -->
    <div class="header">

        <h1>日期提醒</h1>


    </div>


    <!-- 主体 -->
    <div class="bodyer">

        <!-- 未完成 -->
        <div class="b-left">
            <div class="weiwancheng_ul">
                未完成
            </div>
            <div class="weiwancheng_li">
                <ul>

                </ul>
            </div>
        </div>

        <!-- 已超时 -->
        <div class="b-right">
            <div class="yichaoshi_ul">
                已超时
            </div>
            <div class="yichaoshi_li">
                <ul>

                </ul>
            </div>
        </div>
    </div>


    <!-- 新建 -->
    <div class="botter">
        <div class="flie">
            <ul>
                <li>
                    <span>事件</span>
                    <input type="text" class="shijian">
                </li>
                <li>
                    <span>地址</span>
                    <input type="text" class="dizhi">
                </li>
                <li>
                    <span>备注</span>
                    <input type="text" class="beizhu">
                </li>
                <li>
                    <span>截止时间</span>
                    <input type="datetime-local" class="outtime">
                    <button>提交</button>
                </li>

            </ul>
        </div>
    </div>
    <script>
        var btn = document.querySelector('.flie').querySelector('button');
        var thing = document.querySelector('.flie').querySelector('.shijian');
        var address = document.querySelector('.flie').querySelector('.dizhi');
        var beizhu = document.querySelector('.flie').querySelector('.beizhu');
        var endtime = document.querySelector('.flie').querySelector('.outtime');
        var wei_ul = document.querySelector('.weiwancheng_li').querySelector('ul');
        var yi_ul = document.querySelector('.yichaoshi_li').querySelector('ul');



        // 未完成
        btn.onclick = function () {
            // console.log(thing.value + address.value + beizhu.value + outtime.value);
            var wei_li = document.createElement('li');


            //写入未完成内容
            // wei_li.innerHTML = "事件内容：" + thing.value + "<br/>" + "地点：" + address.value + "<br/>" + "备注:" +
            //     beizhu.value + "<br/>";

            // const new_thing = thing;
            // const new_address = address;
            // const new_beizhu = beizhu;
            // const new_endtime = endtime;

            var new_wei_li = "事件内容：" + thing.value + "<br/>" + "地点：" + address.value + "<br/>" + "备注:" +
                beizhu.value + "<br/>";

            var new_yi_li = "事件内容：" + thing.value + "<br/>" + "地点：" + address.value + "<br/>" + "备注:" +
                beizhu.value + "<br/>" + "截止日期：" + endtime.value;

            // 倒计时开始
            const deadline = new Date(endtime.value).getTime();
            var timer = setInterval(function () {
                //截止时间总毫秒数

                //目前总毫秒数
                const now = new Date().getTime();

                const remainingTime = deadline - now;

                const days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
                const hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                const minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
                const seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);

                wei_li.innerHTML = new_wei_li + "倒计时:" + `${days} 天 ${hours} 小时 ${minutes} 分钟 ${seconds} 秒` + "<a herf = 'javascript:;'>删除<a/>";


                // wei_ul.insertBefore(wei_li, wei_ul.children[0]);

                //修改wei_li样式
                // wei_li.style.backgroundColor = "red";
                // wei_li.sytle.marginBottom = "5px";
                // wei_li.sytle.fontSize = "10px";
                // wei_li.style.color = "white";




                var wei_as = document.querySelectorAll('a');
                for (var i = 0; i < wei_as.length; i++) {
                    wei_as[i].onclick = function () {
                        wei_ul.removeChild(this.parentNode);
                        clearInterval(timer);
                    }
                }

                //倒计时为零时
                if (remainingTime < 0) {
                    clearInterval(timer);
                    wei_li.innerHTML = "";
                    //内容移到已超时列表
                    //向右移动
                    var yi_li = document.createElement('li');
                    // yi_li.innerHTML = "事件内容：" + new_thing.value + "<br/>" + "地点：" + new_address.value + "<br/>" + "备注:" +
                    //     new_beizhu.value + "<br/>" + "截止时间:" + new_endtime.value + "<a herf = 'javascript:;'>删除<a/>";

                    yi_li.innerHTML = new_yi_li + "<a herf = 'javascript:;'>删除<a/>";
                    yi_ul.insertBefore(yi_li, yi_ul.children[0]);
                    var yi_as = document.querySelectorAll('a');
                    for (var i = 0; i < yi_as.length; i++) {
                        yi_as[i].onclick = function () {
                            yi_ul.removeChild(this.parentNode);
                        }
                    }


                }


            }, 1000);
            // + "<a herf = 'javascript:;'>删除<a/>"
            //  wei_li.innerHTML

            wei_ul.insertBefore(wei_li, wei_ul.children[0]);


            var wei_as = document.querySelectorAll('a');
            for (var i = 0; i < wei_as.length; i++) {
                wei_as[i].onclick = function () {
                    wei_ul.removeChild(this.parentNode);




                }
            }





            //向右移动
            // yi_ul.insertBefore(yi_li, yi_ul.children[0]);

            // var yi_li = document.createElement('li');

            // yi_li.innerHTML = "事件内容：" + thing.value + "<br/>" + "地点：" + address.value + "<br/>" + "备注:" +
            //     beizhu.value + "<br/>" + "截止时间:" + endtime.value;
            // 删除节点

            thing.value = '';
            address.value = '';
            beizhu.value = '';
            endtime.value = '';
        }



    </script>
</body>


</html>